<template>
	<view class="bottom-tab">
		<view :class="item.center == true ? 'bottom-tab-item-center' : 'bottom-tab-item-sider'" @click="changeTap(item)" v-for="(item, index) in tabList" :key="index">
			<image v-if="curTab == item.id" class="first-img" :src="item.imgOn"></image>
			<image v-if="curTab != item.id" class="first-img" :src="item.imgOff"></image>
			<text :class="curTab == item.id ? 'text-position text-on' : 'text-position'">{{ item.name }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'wyg-bottom-tab-withcenter',
	props: {
		tabIndex: {
			//图片的尺寸
			type: String,
			default: '1'
		},
		tabListParent: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			curTab: 1,
			tabList: [
				
			]
		};
	},
	created() {
		this.curTab = new Number(this.tabIndex);
		if (this.tabListParent.length > 0) {
			this.tabList = this.tabListParent;
		}
	},
	methods: {
		$redirect(_url) {
			uni.redirectTo({
				url: _url
			});
		},
		changeTap(e) {
			this.curTab = e.id;
			this.$redirect(e.url);
		}
	}
};
</script>

<style lang="scss">
.bottom-tab {
	position: fixed;
	background-color: #fdfdfd;
	bottom: 0%;
	left: 0%;
	width: 100%;
	height: 2.9rem;
	// background: url(../../static/image/index/BQLD@3x.png) no-repeat;
	// height: 200rpx;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.bottom-tab-item-center {
		width: 24%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.first-img {
			width: 2.6rem;
			height: 2.6rem;
			margin-top: -0.8rem;

			border-radius: 50%;
			border: 0.01rem solid #c0c4cc;
		}
		.text-position {
			margin-top: 0rem;
			font-size: 0.6rem;
			color: #757575;
		}
		.text-on {
			color: #FD6431;
		}
	}
	.bottom-tab-item-sider {
		width: 19%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.first-img {
			width: 1.5rem;
			height: 1.5rem;
		}
		.text-position {
			margin-top: 0rem;
			font-size: 0.6rem;
			color: #757575;
		}
		.text-on {
			color: #FD6431;
		}
	}
}
</style>
